<template>
  <div class="container">
    <nav-bar title="发布" />
    <div class="form">
      <textarea placeholder="说说此刻你的感受吧" v-model="discrib"></textarea>
      <div class="upload-img">
        <van-uploader 
          v-model="uploadedImgs"
          multiple
          :max-count="9"
          :after-read="imgChanged"
          @delete="deleteImg"
        >
          <div class="plus"></div>
        </van-uploader>
      </div>
    </div>
    <div class="btn-cart">
      <div class="btn-in" @click="pub">发布</div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { 
  uploadFile, 
  insertLife, 
  getMyLife 
} from '../../network/life'
import { Toast } from 'vant'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      discrib: '',
      uploadedImgs: [],
      uploadedImgsUrl: [],
    }
  },
  methods: {
    pub(){
      let imgPathStr = ''
      let imgPathArr = []
      imgPathStr = this.uploadedImgsUrl.join(',')
      let requestData = {
        userkey: this.userKey,
        ImgPath: imgPathStr,
        Text: this.discrib,
      }
      if(requestData.Text === ''){
        Toast('发布文字内容不能为空')
        return false
      }
      if(requestData.ImgPath === ''){
        Toast('发布图片不能为空')
        return false
      }
      insertLife(requestData, msg => {
        this.$router.push({
          path: '/success',
          query: {
            navigate: '/life'
          }
        })
      })
    },
    imgChanged(file) {
      // 此时可以自行将文件上传至服务器
      let files = []
      if(file instanceof Array){ // 多张图
        file.map(item => {
          files.push(item.file)
        })
        this.uploadImg(files)
      } else { // 单张图
        files = [file.file]
        this.uploadImg(files)
      }
    },
    deleteImg(file, detail){
      let deleteIndex = detail.index
      this.uploadedImgsUrl.splice(deleteIndex, 1)
    },
    //上传图片
    async uploadImg(files) {
      for(let i = 0; i < files.length; i++){
        let imgUrl = await this.put(files[i])
        this.uploadedImgsUrl.push(imgUrl)
      }
    },
    put(file) {
      return new Promise(async (resolve, reject) => {
        let timestamp = new Date().getTime()
        let picName = timestamp + '-' + parseInt(Math.random() * 99)
        let fileType = file.type.split('/')[1]
        try {
          let result = await this.$client.put('mini/develop/temp/' + picName + '.' + fileType, file)
          resolve(result.url)
        } catch (e) {
          console.log('Error: ', e)
        }
      })
    },
  },
}
</script>

<style scoped>
.form{
  padding: 30px;
}
.form textarea{
  display: block;
  width: 100%;
  height: 100px;
  background: none;
  border: none;
  line-height: 1;
}
.plus{
  position: relative;
  height: 80px;
  width: 80px;
  background-color: #eae8e8;
}
.plus:before{
  display: block;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 1px;
  margin-left: -18px;
  margin-top: -1px;
  background-color: #8a8888;
}
.plus:after{
  display: block;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  height: 36px;
  width: 1px;
  margin-top: -18px;
  background-color: #8a8888;
}
.btn-cart{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff, #ffffff);
}
.btn-cart .btn-in{
  line-height: 50px;
  border-radius: 50px;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
}
</style>